<template>
  <section style="background-color: rgb(8, 17, 32); display: flex; height: 3%">
    <div
      id="left"
      style="
        width: 92%;
        display: flex;
        -webkit-app-region: drag;
        justify-content: flex-start;
        align-items: center;
      "
    >
      <img src="../index/logo/tray.png" alt="" style="height: 2vh;width: 2vh;margin-left: 0.5vh;background-color: rgb(253, 253, 253);border-radius: 3px;"
      />
      <span style="font-size: 2vh;margin-left: 0.5vw;font-weight: 700;color:rgb(250, 240, 240);">广播系统</span>
    </div>

    <div
      id="right"
      style="width: 8%; height: 100%; display: flex; justify-content: flex-end"
    >
      <button
        type="button"
        id="minbt"
        @click="handleMin"
        class="iconfont icon-suoxiao"
      ></button>
      <button
        type="button"
        id="maxbt"
        @click="hanleMax"
        class="iconfont icon-quanping1"
      ></button>
      <button
        type="button"
        id="closebt"
        @click="hanleClose"
        class="iconfont icon-htmal5icon21"
      ></button>
    </div>
  </section>
  <div class="all">
    <div class="head">
      <div class="brandName">
        <div class="GEBOSS"></div>
        <div class="NET"></div>
      </div>
      <div class="status">
        <span class="stuatusSpan">服务器状态：{{ status }}</span>
      </div>
      <div class="Date">
        <span class="DateSpan">{{ Date }}</span>
      </div>
    </div>
    <div class="main">
      <!-- 左边设备列表 -->
      <div class="mainBig">
        <component :is="currentCompoment"></component>
        <!-- <fenquView /> -->
      </div>
      <!-- 右边歌曲播放列表 -->
      <div class="mainList">
        <div class="playList">
          <div class="musicMenu">
            <div
              class="musicMenuImdex iconfont icon-dvd"
              @click="defaultList(-3)"
              :class="{ active: currentMusicIndex == -3 }"
            >
              <div>内置CD</div>
            </div>
            <div
              class="musicMenuImdex iconfont icon-dvd"
              @click="defaultList(-4)"
              :class="{ active: currentMusicIndex == -4 }"
            >
              <div>TTS</div>
            </div>
            <div
              class="musicMenuImdex iconfont icon-yinfu"
              v-for="(item, index) in musicMenuList"
              :key="index"
              @click="selectMusicPlay(index, item)"
              :class="[
                { active: currentMusicIndex == index },
                { 'iconfont icon-dvd': index == 0 },
              ]"
            >
              <div>{{ item }}</div>
            </div>

            <div>
              <div
                class="musicMenuImdex iconfont icon-yinfu"
                v-for="(item, index) in ownPlayMenu"
                :key="index"
                @click="selectOwnPlay(item, index)"
                :class="{ active: currentOwnIndex == index }"
              >
                <div>{{ item.saveName }}</div>
              </div>
            </div>
          </div>
          <div class="fenge"></div>
          <div class="musicl" v-if="type == 0">
            <div
              class="musicList"
              v-for="(item, index) in musicPlayList"
              :key="index"
              @click="selectMusic(index, item)"
              :class="{ activeMusic: currentMusicNameIndex == index }"
            >
              {{ item.fullpathname }}
            </div>
          </div>

          <div class="musicl" v-if="type == -3"></div>
          <div class="musicl" v-if="type == -4"></div>
          <div class="fenge"></div>
          <div class="playOrder">
            <div
              v-for="(item, index) in orderlist"
              class="orderButton"
              @click="orderButtonClick(index)"
            >
              <el-tooltip
                effect="dark"
                :content="item.content"
                placement="top-start"
              >
                <el-button
                  type="info"
                  class="iconfont"
                  :class="[
                    item.iconName,
                    { btn: currentButtonIndex === index },
                  ]"
                  circle
                ></el-button>
              </el-tooltip>
            </div>
          </div>
        </div>
        <!-- 音量调节 -->
        <div class="volumn">
          <div class="thisVolumn">
            <span>当 前 音 量 : {{ value1 }}</span>
            <div class="vulumn"></div>
            <div class="block">
              <el-slider v-model="value1"></el-slider>
            </div>
          </div>
          <div class="preVolumn">
            <span>预 听 音 量 : {{ value2 }}</span>
            <div class="vulumn"></div>
            <div class="block">
              <el-slider v-model="value2"></el-slider>
            </div>
          </div>
        </div>
      </div>
      <!-- 最右侧按钮 -->
      <div class="mainRight">
        <div class="rightButtonContentTop">
          <div
            v-for="(item, index) in buttonList1"
            class="button"
            @click="
              changeBgTop(item, index);
              handleChangeMode(item, index);
            "
            :class="{ isSected: currentTopIndex === index }"
          >
            <span class="buttonIcon iconfont" :class="item.class"></span>
            <span :key="item">{{ item.name }}</span>
          </div>
        </div>
        <div class="rightButtonContentBottom">
          <div
            v-for="(item, index) in buttonList2"
            class="button"
            @click="
              changeBg(item, index);
              changeComponent(item, index);
            "
            :class="{ isSected: currentDownIndex === index }"
          >
            <span class="buttonIcon iconfont" :class="item.class"></span>
            <span :key="item">{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="under">
      <div
        class="button"
        v-for="(item, index) in buttonList3"
        @click="changeBgUnder(item, index)"
        :class="{ isSected: currentUnderIndex === index }"
      >
        <span class="buttonIcon iconfont" :class="item.class"></span
        ><span :key="item">{{ item.name }}</span>
      </div>
    </div>
  </div>
  <!-- <div>
    <span style="color: brown">11111----</span>
    <span>{{ data }}</span>

    <span>{{ len }}</span>
  </div> -->
</template>
<script setup>
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { hanleMax, handleMin, hanleClose } from "../../utils/ipcRenderer";

import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
import componentList from "./components/listView.vue";
import componentFenzu from "./components/fenzuListView.vue";
import fenquView from "./components/fenquView.vue";
// import { getMusicListApi,getPlayMusicAip } from "../../api/modules/login";
import { getMusicListApi,getPlayMusicAip } from "gyzgb_axios_wapper";
import { getGroupListApi } from "../../api/modules/own";
import axios from "axios";

//const showEquip =ref(true);

// document.getElementById("maxbt").addEventListener("click", () => {
//   console.log("max1");
//   ipc.send("window-max");
// });

// const handleMax=()=>{
//   console.log("max1");
//   ipc.send("window-max");

// }
const showComponent = ref(2);
const data = ref("5555----");
const len = ref(0);
const text = () => {
  axios
    .get("http://127.0.0.1:80/api/general/alldeviceinfo")
    .then((response) => {
      console.log("数据", response.data.data.length);
      len.value = response.data.data.length;
      // data.value = response.data;
    });
};
const status = ref("空闲520");
const Date = ref("11.11.11");
const router = useRouter();
//播放顺序的按钮
const orderlist = ref([
  {
    iconName: "icon-danquxunhuan",
    content: "单曲播放",
  },
  {
    iconName: "icon-22_suijibofang",
    content: "随机循环",
  },
  {
    iconName: "icon-liebiaoxunhuan",
    content: "列表循环",
  },
  {
    iconName: "icon-danquxunhuan1",
    content: "单曲循环",
  },
  {
    iconName: "icon-shunxubofang",
    content: "顺序播放",
  },
]);

const buttonList1 = ref([
  {
    class: "icon-quanxuan",
    name: "全 选",
  },
  { class: "icon-gaojing", name: "告 警" },
  {
    class: "icon-lianxi",
    name: "寻 呼",
  },
  {
    class: "icon-remind",
    name: "钟 声",
  },
  {
    class: "icon-bofang",
    name: "播 放",
  },
  {
    class: "icon-tingzhi",
    name: "停 止",
  },
]);
const buttonList2 = ref([
  {
    class: "icon-fenzu",
    name: "分 组",
    currentCompoment: componentFenzu,
  },
  {
    class: "icon-fenquweixuanzhong",
    name: "分 区",
    currentCompoment: fenquView,
  },
  {
    class: "icon-liebiao",
    name: "列 表",
    currentCompoment: componentList,
  },
  {
    class: "icon-ditu",
    name: "地 图",
  },
  {
    class: "icon-jiankong",
    name: "监 控",
  },
]);
const buttonList3 = ref([
  {
    class: " icon-dianyuan",
    name: "电 源 管 理",
    routePath: "/chargeManage",
  },
  { class: "icon-kongzhi", name: "程 序 控 制" },
  {
    class: "icon-dingshirenwu",
    name: "定 时 任 务",
    routePath: "/setTimePoint",
  },
  {
    class: "icon-yulan",
    name: "今 日 预 览",
    routePath: "/viewToday",
  },
  {
    class: "icon-jianting2",
    name: "输 出 监 听",
  },
  {
    class: " icon-monitor",
    name: "现 场 监 听",
  },
  { class: "icon-jinzhi", name: "停 止 监 听" },
  {
    class: "icon-icon_ear_line",
    name: "节 目 预 听",
  },
  {
    class: "icon-kuaijie",
    name: "快 捷1 ",
  },
  {
    class: "icon-kuaijie",
    name: "快 捷 2",
  },
  {
    class: "icon-shezhi-shezhi-tianchong",
    name: "设置",
    routePath: "/sheZhi",
  },
]);
//播放列表（上面part）
const type = ref(0);
const musicMenuList = ref([]);
const musicListBig = ref({});
const currentMusicIndex = ref(0);
const currentOwnIndex = ref(-1);
//播放音乐（下面part）
const musicPlayList = ref([]); //系统音乐列表
const ownPlayMenu = ref([]); //个人音乐列表
const pageSize = ref(56); //单页面显示多少个
const currentPage = ref(1); //当前页面
const value1 = ref(3); //现在音量
const value2 = ref(2); //预听音量
const currentTopIndex = ref(); //主页面分组分区当前选中索引righttop
const currentDownIndex = ref(1); //主页面分组分区当前选中索引rightbottom
const currentUnderIndex = ref(); //主页面分组分区当前选中索引underbottom
const currentButtonIndex = ref(0); //播歌顺序选中索引
const currentCompoment = ref(fenquView);
const currentMusicNameIndex = ref();
const selectOwnPlay = (item, index) => {
  type.value = 0;
  currentOwnIndex.value = index;
  currentMusicIndex.value = -1;
  musicPlayList.value = item.musicList;
  console.log("item", item);
};
const selectMusic = (index, item) => {
  currentMusicNameIndex.value = index;

  console.log("我被点击了", currentMusicNameIndex.value);
};

const defaultList = (num) => {
  console.log(num);
  currentMusicIndex.value = num;
  type.value = num;
};

const selectMusicPlay = (index, item) => {
  type.value = 0;
  currentMusicIndex.value = index;
  currentOwnIndex.value = -1;
  console.log("big", musicListBig.value[item]);
  musicPlayList.value = musicListBig.value[item];
  musicPlayList.value = musicPlayList.value.map((item) => {
    const length = item.fullpathname.split("/").length;
    const name = item.fullpathname.split("/")[length - 1];

    return {
      ...item,
      fullpathname: name,
    };
  });
};
const paly = async () => {
  // 请求播放接口
  let data = {
    secret: "88888888-2021-2022-2023-00000000",
    deviceidarray: [19],
    musicpatharray: [
      "E:/123/网络广播服务器软件/./user/sq/usermusic/默认//03 不谓侠.mp3",
    ],
    playmode: 0,
  };
  const res = await getPlayMusicAip(data);
  console.log(res);
};
const changeBgTop = (_item, index) => {
  currentTopIndex.value = index;
  console.log("123", index);
  if (index == "4") {
    paly();
  }
};
const changeBg = (_item, index) => {
  currentDownIndex.value = index;
};

onMounted(() => {
  getMusicLists();
  getOwnPlayList();
});

//获取个人歌曲列表
const getOwnPlayList = async () => {
  try {
    const res = await getGroupListApi();
    ownPlayMenu.value = res;
    console.log("res", res);
  } catch (error) {}
};

// const getDeviceLists = () => {
//   axios
//     .get("http://127.0.0.1:80/api/general/alldeviceinfo")
//     .then((response) => {
//       console.log("数据", response.data.data.length);
//       equipList.value = response.data.data;

//       remainder.value = equipList.value.length % pageSize.value;
//       // 获取一共多少页
//       totalPage.value = Math.ceil(equipList.value.length / pageSize.value);
//       console.log("余数", remainder.value);
//       console.log("一共多少也", totalPage.value);
//       if (totalPage.value == 1) {
//         number.value = 56 - remainder.value;
//       }
//     });
// };
const getMusicLists = async () => {
  const res = await getMusicListApi();
  musicListBig.value = res.data;
  musicMenuList.value = Object.keys(res.data);

  console.log("music", musicListBig.value);
};
// const router = useRouter();
const changeBgUnder = (_item, index) => {
  currentUnderIndex.value = index;
  router.push(_item.routePath);
  console.log("_item.routePath", _item.routePath);
};
const orderButtonClick = (index) => {
  currentButtonIndex.value = index;
  // bgcolor.value= "linear-gradient(rgb(30, 57, 87), rgb(123, 223, 249))"
  var buttons = document.querySelectorAll(".iconfont");
  buttons.forEach;
};

const changeComponent = (item, index) => {
  // console.log("11", item.name);
  currentDownIndex.value = index;
  currentCompoment.value = item.currentCompoment;

  // showEquip.value =!showEquip.value;
  // showComponent.value = 1;

  // console.log(item, "click");
};

// const handleChangeMode = (item, index) => {
//   if (index == 0) {
//     router.push({ path: "/fenqu", query: { data: "Allselected" } });
//   }
// };

onBeforeMount(() => {});

onBeforeUpdate(() => {});
onUpdated(() => {});
onBeforeUnmount(() => {});
onUnmounted(() => {});
</script>

<style scoped lang="less">
@import "./index.less";
@import url("./font/iconfont.css");
@import url("./font/iconfont2.css");
@import url("../index/logo/iconfont.css");
@import url("./../../assets/musicPlayList/iconfont.css");
@import url("../index/logo/suoxiao/iconfont.css");
</style>
<!-- <style scoped src="./index.css">
</style> -->
